<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-sm p-6">
    <label for="maxVolume">
      <span class="block text-sm font-medium text-gray-900">Max Volume</span>

      <div class="mt-3 flex items-center gap-3">
        <input
          type="range"
          name="maxVolume"
          id="maxVolume"
          min="0"
          max="100"
          value="20"
          class="h-3.5 w-full appearance-none rounded-full bg-gray-300 [&::-webkit-slider-thumb]:size-7 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[6px] [&::-webkit-slider-thumb]:border-gray-500 [&::-webkit-slider-thumb]:bg-gray-200"
        />

        <span class="text-sm/none font-medium text-gray-700">20%</span>
      </div>
    </label>
  </body>
</html>
